<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html;charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Title</title>
</head>
<body>
    <form>
        用户名：<input type="text" name="email" id=""><br>
        密码：<input type="text" name="password" id=""><br>
        验证码：<img src="${pageContext.request.contextPath}/verifyCode"></br>
        请输入验证码：<input type="text" id="idCode" onblur="ifCode()" >
        <input type="button" value="登陆" onclick="login()">
    </form>
    <span id="message"></span>
</body>

<script type="text/javascript" src="layui/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">

    var ifCapture;
    function ifCode(){
        var userCode = $("[id='idCode']").val();
        if (userCode.length>=4){
            $.ajax({
                url: "captcha",
                data:"userCode="+userCode,
                type:"get",
                dataType:"json",
                success:function (data){
                    console.log( data.code)
                    if (data.code=="successful"){
                        ifCapture="successful";
                        $("#message").html("验证码正确！")
                    }else {
                        ifCapture="failed";
                        $("#message").html("验证码错误！")
                    }
                }
            });
        }else {
            $("#message").html("")
            ifCapture="null";
        }
    }

    function login(){
        if ( ifCapture="successful"){
            var user = $("form").serialize();
            $.ajax({
                url:"users",
                data:user,
                type:"get",
                dataType:"json",
                success:function(data){
                    if (data.code=="successful"){
                        location="list.jsp";
                    }else {
                        location="login.jsp";
                    }
                }
            })
        }

    }

</script>

</html>
